var React = require('react');


var Bheader = require('../widget/Bheader');
var Footer = require('../widget/Footer');
var ajax = require('../tools/ajax');

module.exports = React.createClass({
    getInitialState: function () {
        return {
            theme:"Default",
            flag : false,
            faxian:[],
            faxianList:""
        }
    },
    myScroll:"",

    componentDidMount: function () {
        this.getFaxian();
    },

    change:function(e){
        if(this.state.flag == true){
            this.setState({ flag: false });
            document.getElementsByClassName('tutu')[0].setAttribute('src','images/bottom.png');
        } else {
            this.setState({ flag: true });
            document.getElementsByClassName('tutu')[0].setAttribute('src','images/top.jpg');
        }
    },
    action(e){
        var action = e.currentTarget.getAttribute("action");
        var faxianImg = e.currentTarget.getAttribute("data");
        localStorage.setItem("faxianImg",faxianImg);
        location.href = action;
    },
    getFaxian(){
        var p=this;
        ajax("POST","getFaxian",{},function(dt){
            if(dt&&dt.success){
                var obj = dt.data;
                console.log(obj);
                p.setState({faxian:obj}, ()=>{
                    var faxianList = obj.map(function(o,index){
                        return(
                            <li key={index} className="find_con">
                                <div className="xin_img" onClick={p.action} action="#faxianInfo" data={o.xiangqing_img}>
                                    <img src={o.discover_img} />
                                </div>
                                <div className="xin_con">
                                    <div className="xin_title">
                                        <h4>{o.tital}</h4>
                                    </div>
                                    <div className={p.state.flag == false ? "xin_describe hidden" : "xin_describe visible"}>
                                        {o.content}
                                    </div>
                                    <div className="more" onClick={p.change}>
                                    </div>
                                </div>
                            </li>
                        )
                    })
                    p.setState({faxianList:faxianList});
                })
                if(!p.myScroll){
                    p.myScroll = new IScroll ("#faxianWrapper",{
                        // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
                        preventDefault: false,
                        // 禁止缩放
                        zoom: false,
                        // 支持鼠标事件，因为我开发是PC鼠标模拟的
                        mouseWheel: true,
                        // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
                        probeType: 3,
                        // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
                        bounce: true,
                        // 展示滚动条
                        scrollbars: false
                    })
                }
            }
        })
    },
    render: function () {
        var p = this;
        return (
            <div className="main"  id="main">
                <Bheader theme={this.state.theme} headr="false" title="发现新宠"></Bheader>
                <div  id="faxianWrapper" className="container-t wrap" >
                    <ul className="faxianMain"  style={{minHeight:"101%"}}>
                        {this.state.faxianList}
                    </ul>
                </div>
                <Footer witchSelected="faxian"></Footer>
            </div>
        )
    }
});
